<script setup lang="ts">
import PageHeader from "./component/PageHeader/index.vue";
import Sidebar from "./component/Sidebar/index.vue";
</script>

<template>
  <div class="app-main">
    <div class="sidebar">
      <sidebar/>
    </div>
    <div class="main-container">
      <page-header/>
      <router-view v-slot="{ Component }">
        <transition name="fade-transform" mode="out-in">
          <component :is="Component"/>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-main {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;

  .sidebar {
    height: 100%;
  }

  .main-container {
    padding: 0 20px;
    width: 100%;
  }
}
</style>